<template>
  <div>
    <h1>添加会员</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>昵称</td>
          <td>
            <input type="text" v-model="info.uname" />
          </td>
        </tr>
        <tr>
          <td>账号</td>
          <td><input type="text" v-model="info.uaccount" /></td>
        </tr>
        <tr>
          <td>密码</td>
          <td><input type="password" v-model="info.upwd" /></td>
        </tr>
        <tr>
          <td>年龄</td>
          <td><input type="number" v-model="info.uage" /></td>
        </tr>
        <tr>
          <td>照片</td>
          <td>
            <input type="file" @change="img" />
            <img :src="info.uimg" width="60" height="60" />
          </td>
        </tr>
        <tr>
          <td>会员等级</td>
          <td>
            <select v-model="info.dname">
              <option value="">请选择</option>
              <option value="青铜会员">青铜会员</option>
              <option value="白银会员">白银会员</option>
              <option value="黄金会员">黄金会员</option>
              <option value="铂金会员">铂金会员</option>
              <option value="钻石会员">钻石会员</option>
              <option value="至尊会员">至尊会员</option>
            </select>
          </td>
        </tr>
        <tr>
          <td></td>
          <td><input type="button" value="添加" @click="add" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
let info: any = reactive({
  uname: "",
  uage: "",
  uaccount: "",
  upwd: "",
  dname: "",
  uimg: "",
  sid: 1,
});
const img = (e: any) => {
  let obj = e.target.files[0];
  let f = new FormData();
  f.append("file", obj);
  axios({
    url: "/api/User/Img",
    method: "post",
    data: f,
  }).then((res) => {
    console.log(res);
    if (res.data == "照片格式不正确") {
      alert("照片格式不正确");
      return;
    }
    if (res.data == "图片上传大小不得超过2MB") {
      alert("图片上传大小不得超过2MB");
      return;
    }
    info.uimg = res.data;
  });
};
const add = () => {
  axios({
    url: "/api/User/Add",
    method: "post",
    data: info,
  }).then((res) => {
    console.log(res);
    if (res.data == -1) {
      alert("昵称重复");
      return;
    }
    if (res.data > 0) {
      alert("添加成功");
      return;
    } else {
      alert("添加失败");
      return;
    }
  });
};
</script>

<style scoped></style>
